/* eslint-disable jsx-a11y/anchor-is-valid */
import { Card } from "antd";
import React, { useEffect, useState } from 'react'
import { getPlayDetail, getLyric, getAlbum } from '@/api/user'
import parseTime from './UserPlayListFn'
import { useNavigate } from 'react-router-dom'


export default function App() {

  const [musicMessage,setMusicMessage] = useState()
  const [musicLyric,setMusicLyric] = useState()
  const [musicAlbum,setMusicAlbum] = useState()
  const [musicSongs,setMusicSongs] = useState()
  const navigate = useNavigate()

  useEffect(()=>{
    getPlayDetail(localStorage.getItem('songId')).then((res)=>{
      // console.log(res?.data?.songs?.['0']);
      setMusicMessage(res?.data?.songs?.['0'])
      getAlbum({ id: res?.data?.songs?.['0']?.al?.id }).then((res)=>{
        // console.log(res.data.songs);
        setMusicAlbum(res.data.album)
        setMusicSongs(res.data.songs)
      })
    })
    getLyric({ id: localStorage.getItem('songId') }).then((res)=>{
      setMusicLyric(res.data.lrc.lyric)
    })
  },[])

  //作者的遍历
  const descriptionData = (item)=>{
    let descriptionArr = []
    item?.ar?.map((ele)=>{
      return descriptionArr.push(ele.name)
    })
    return descriptionArr.join('/')
  }

  //时间的转换
  const descriptionTime = (item)=>{
    if(item?.publishTime){
      return parseTime(item.publishTime)
    }else{
      // eslint-disable-next-line no-useless-concat
      return '0000-00-00'
    }
  }

  //card卡片
  const tabListNoTitle = [
    {
      key: 'picture',
      tab: 'picture',
    },
    {
      key: 'information',
      tab: 'information',
    },
    {
      key: 'collection',
      tab: 'collection',
    },
  ];
  const contentListNoTitle = {
    picture: <img style={{ width: '100%' }} alt='' src={musicMessage?.al?.picUrl}></img>,
    information: <>
      <p>歌名 : {musicMessage?.name}</p>
      <p>作者列表 : {descriptionData(musicMessage)}</p>
      <p>歌词 : {musicLyric}</p>
    </>,
    collection: <>
    <p>专辑名 : {musicMessage?.al?.name}</p>
    <p>专辑介绍 : {musicAlbum?.briefDesc}</p>
    <p>发布时间 : {descriptionTime(musicAlbum)}</p>
    <div style={{height:'500px',overflow:'auto'}}>其他音乐 : {musicSongs?.map((item)=>{
      return (
        <p style={{width:'350px',display:'flex',justifyContent:'space-between'}} key={item.id}>
          <a onClick={()=>navigate(`/songs/details/${item.id}`)}>--{item.name}--</a>
          <span>{descriptionData(item)}</span>
        </p>
      )
    })}</div>
  </>,
  };
  const [activeTabKey2, setActiveTabKey2] = useState('picture');
  const onTab2Change = (key) => {
    setActiveTabKey2(key);
  };

  return (
    <>
      <Card
        style={{ margin: "0 auto", width: 600 }}
        tabList={tabListNoTitle}
        activeTabKey={activeTabKey2}
        onTabChange={onTab2Change}
      >
        {contentListNoTitle[activeTabKey2]}
      </Card>
    </>
  )
}
